<template>
    <div>
        <div class="search-top">
            <div class="contentbox">
                <input type="text" placeholder="输入搜索内容" v-model="searchvalue" @keyup.enter="getBookSearchFun();historylist.push(searchvalue);">
                <span class="iconfont icon-search search"></span>
                <span class="iconfont icon-close-circle-fill cha" v-if="searchvalue != ''" @click="searchvalue='';searchlist=null"></span>
            </div>
            <a to="" @click="back()" class="close">取消</a>
        </div>
        <div class="search1" v-if="!searchlist">
        <div class="search-title">大家都在搜</div>
        <div class="search-tags">
            <i v-for="(item,index) in hotlist" :key="index" @click="searchvalue=item">{{item}}</i>
        </div>
        <div class="search-title" v-if="historylist.length>0">搜索历史<span class="iconfont icon-lajitong laji" @click="clearhistory()"></span></div>
        <div class="search-tags">
            <i v-for="(item,index) in historylist" :key="index" @click="searchvalue=item">{{item}}</i>
        </div>
        </div>
        <div class="searchlist" v-if="searchlist">
            <ul ref="lists">
                <li v-for="(item,index) in searchlist" :key="index">
                    <router-link :to="{path:'/detail',query:{id:item._id}}">
                    
                        <img :src="'http://statics.zhuishushenqi.com'+item.cover" alt="">
                    
                    <div class="right">
                        <h4>{{item.title}}</h4>
                        <p>{{item.shortIntro}}</p>
                        <div class="infobox">
                            <span class="iconfont icon-zuozhe"></span>
                            <span class="author">{{item.author}}</span>
                        </div>
                    </div>
                    </router-link>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import {getBookSearchhotword,getBookSearch} from '../api/search.js'
export default {
    data() {
        return {
            searchvalue:"",
            hotlist:[],
            historylist:[],
            searchlist:null,
            offset:0,
            flag:true
        }
    },
    methods: {
        clearhistory(){
            this.historylist=[];
        },
        back(){
            this.$router.go(-1);
        },
        godetail(){
            this.$router.push({path: '/detail', query: {book:this.lists}});
        },
        getBookSearchFun(){
            if(this.searchvalue !="" && this.flag){
                this.flag = false
                // this.historylist.push(this.searchvalue);
            getBookSearch({query:this.searchvalue}).then(data=>{
                // console.log(data);
                
                if(this.searchlist==null){
                    this.searchlist =[];
                }
                
                if(data.books.length<7){
                    this.searchlist = data.books;
                    this.flag=true;
                }else{
                    this.offset += 7;
                    // console.log(this.searchlist)
                    this.searchlist = this.searchlist.concat(data.books.splice(this.offset,7));
                    // console.log(this.searchlist)
                    this.flag=true;
                }               
                
            })
            }
        },
        //滚动条监听
        handleScroll(){            
                // console.log(111);
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            // console.log(scrollTop);
            // console.log(this.$refs.lists.getElementsByTagName("li"));
            let lis = this.$refs.lists.getElementsByTagName("li");
            // console.log(lis);
            let num = lis.length;
            // console.log(num);
            let liHeight = lis[num-2].offsetTop;
            // console.log(liHeight);
            // console.log("滚动距离"+scrollTop+"高度"+liHeight/2);
            if(scrollTop > liHeight/3){
                // console.log("ok");
                this.getBookSearchFun();
            }            
        }
    },
    mounted() {
        this.$nextTick(()=>{
            getBookSearchhotword().then(data=>{
                for(let i = 0; i<15;i++){
                    this.hotlist.push(data.searchHotWords[i].word) ;         
                }
            })
            window.addEventListener("scroll",this.handleScroll);
        })
    },
    beforeDestroy() {
        window.removeEventListener("scroll",this.handleScroll);
    }
}
</script>
<style lang="less">
.search-top{
    position: relative;
    box-sizing: border-box;
    height: 2.75rem;
    padding-top: .6875rem;
    padding-bottom: .625rem;
    border-bottom: 1px solid #f0f1f2;
    background-color: #fff;
    .contentbox{
    position: absolute;
    top: 0;
    right: 3.75rem;
    bottom: 0;
    left: 1rem;
    height: 2rem;
    margin: auto;
    border-radius: .25rem;
    background-color: #f6f7f9;
    input{
    font-size: .875rem;
    width: 78%;
    height: inherit;
    padding: 0 2rem;
    border: 0 none;
    background: 0 0;
    }
    .search{
    position: absolute;
    top: 0.5rem;
    bottom: 0;
    left: .5rem;
    margin: auto;
    color: #969ba3;
    font-size: 0.85rem;
    }
    .cha{
        position: absolute;
        right: 0.5rem;
        top: 0.5rem;
        color: rgb(150,155,163);
    }
    }
    .close{
    font-size: .875rem;
    line-height: 2rem;
    position: absolute;
    top: 0;
    right: .25rem;
    bottom: 0;
    width: 3.25rem;
    height: 2rem;
    margin: auto;
    text-align: center;
    background-color: #fff;
    }
}
.search-title{
    line-height: 1.8125rem;
    overflow: hidden;
    padding: .9375rem 1rem 0;
    background-color: rgba(0,0,0,.03);
    font-size: 13px;
    font-weight: 400;
    color: #969ba3;
    .laji{
        float: right;
    }
}
.search-tags {
    padding: .25rem .5rem .75rem 1rem;
    i{
        margin: .5rem .5rem 0 0;
        color: #969ba3;
        font-size: .8125rem;
        line-height: 1.6875rem;
        display: inline-block;
        padding: 0 .625rem;
        text-align: center;
        border: 1px solid;
        border-radius: 99px;
        font-style: normal;
    }
}
.searchlist{
    ul{
        li{
            a{
                position: relative;
                display: block;
                overflow: hidden;
                padding: 1rem;
                -webkit-transition: padding-left .15s;
                transition: padding-left .15s;
            }
            img{
                font-size: 0;
                float: left;
                width: 4.125rem;
                height: 5.5rem;
                margin-right: .5rem;
                box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
            }
            .right{
                overflow: hidden;
                h4{
                    line-height: 1.4;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
                p{
                    line-height: 1.1875rem;
                    display: -webkit-box;
                    height: 2.25rem;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    font-size: .875rem;
                    // line-height: 1.125rem;
                    overflow: hidden;
                    margin: .375rem 0;
                    color: #969ba3;
                }
                .infobox{
                    font-size: .75rem;
                    overflow: hidden;
                    .iconfont{
                        color: #969ba3;
                        font-size: 0.625rem;
                    }
                    .author{
                        font-size: .8125rem;
                        color: #969ba3;
                    }
                }
            }
        }
    }
}
</style>